<template>
  <div class="setting" ref="setting">
    <div class="select-content">
      <img class="setting-seat-img" src="./../../assets/images/setting/setting.png" alt="">
      <div class="select-title">
        <img class="select-title-img" :src="settingTitleImgSrc[settingIndex]" alt="">
        <div class="select-title-item-list">
          <span
            :class="{'active': settingIndex == index}"
            @click="changeSetting(index)"
            v-for="(item, index) in settingTitle"
            :key="index">{{item}}</span>
        </div>
      </div>
      <div class="select-content-part">
        <div class="select-module" v-if="settingIndex == 0">
          <ul class="select-module-list">
            <li
              :class="{'active': item.moduleSeat.length > 0, 'show': item.show}"
              v-for="(item, index) in moduleList"
              :key="index"
               @click="selectModule(index)">
                <div class="module-item-img">
                  <img v-if="item.moduleSeat.length > 0" src="./../../assets/images/setting/selected-item.png" alt="">
                  <img v-else src="./../../assets/images/setting/select-item.png" alt="">
                  <span>{{item.moduleType}}</span>
                </div>
                <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
        <div class="select-theme" v-else-if="settingIndex == 1">
          <div class="border-theme">
            <div
              class="theme-item"
              :class="{'active': moduleThemeIndex == index}"
              v-for="(item, index) in moduleTheme.borderTheme"
              :key="index"
              @click="changeTheme('moduleTheme', index)">
                <div class="border-img">
                  <img :src="moduleThemeIndex == index ? item.srcSelected : item.src" alt="">
                </div>
                <span>{{item.name}}</span>
            </div>
          </div>
          <div class="theme-part-border"></div>
          <div class="echarts-theme">
            <div
              class="theme-item"
              :class="{'active': echartsThemeIndex == index}"
              v-for="(item, index) in moduleTheme.echartsTheme"
              :key="index"
              @click="changeTheme('echartsTheme', index)">
                <div class="border-img">
                  <img :src="echartsThemeIndex == index ? item.srcSelected : item.src" alt="">
                </div>
                <span>{{item.name}}</span>
            </div>
          </div>
        </div>
        <div class="select-background" v-else>
          <div
            class="theme-item"
            :class="{'active': backgroundThemeIndex == index}"
            v-for="(item, index) in backgroundTheme"
            :key="index"
            @click="changeTheme('backgroundTheme', index)">
            <div class="border-img">
              <img :src="item.src" alt="">
            </div>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div class="setting-button">
        <div
          class="setting-button-item"
          v-for="(item, index) in settingButton"
          :key="index"
          @click="endSetting(index)">
          <img src="./../../assets/images/setting/setting-button.png" alt="">
          <span>{{item}}</span>
        </div>
      </div>
    </div>
    <div class="drag-module">
      <img class="drag-seat-img" src="./../../assets/images/setting/drag-module.png" alt="">
      <div class="drag-content" ref="dragContent">
        <div
          v-drag="{getIsOut}"
          class="drag-border"
          :class="{'moving': moveIndex == index,
          'module-type1x1': item.moduleType == '1x1',
          'module-type1x2': item.moduleType == '1x2',
          'module-type2x1': item.moduleType == '2x1',
          'module-type2x2': item.moduleType == '2x2',
          'module-type3x2': item.moduleType == '3x2',
          'hide-module': item.moduleSeat.length == 0}"
          :style="dragItemStyle[index].style"
          v-for="(item, index) in moduleList"
          :key="index"
          @mouseup="dragsFn($event, index)"
          @mousedown="dragDownFn($event, index)"
          @mouseleave="dragsOutFn($event, index)">
            <div class="drag-background"></div>
            <!--<img :src="dragImgSrc(item.moduleType)" alt="">-->
            <span class="drag-span">{{item.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
import { moduleStyle, getModuleSeat, getOnceSize, getOnceSeat, getOriginalAllSeat, moduleListToModule } from './../../utils/modulePosition'
export default {
  name: 'setting',
  props: {
  },
  data () {
    return {
      isOut: false,
      moveIndex: '',
      settingIndex: 0, // 设置主题索引
      settingTitle: ['模块设置', '模块主题', '背景设置'],
      settingTitleImgSrc: [
        require('./../../assets/images/setting/setting-left.png'),
        require('./../../assets/images/setting/setting-center.png'),
        require('./../../assets/images/setting/setting-right.png')
      ],
      moduleList: [],
      moduleThemeIndex: 1,
      echartsThemeIndex: 1,
      backgroundThemeIndex: 1,
      olbModuleList: [],
      moduleTheme: {
        borderTheme: [
          {
            src: require('./../../assets/images/setting/module-theme2.png'),
            srcSelected: require('./../../assets/images/setting/module-theme2-selected.png'),
            name: '居中边框'
          },
          {
            src: require('./../../assets/images/setting/module-theme1.png'),
            srcSelected: require('./../../assets/images/setting/module-theme1-selected.png'),
            name: '靠左边框'
          }
        ],
        echartsTheme: [
          {
            src: require('./../../assets/images/setting/echarts-flat.png'),
            srcSelected: require('./../../assets/images/setting/echarts-flat-selected.png'),
            name: '偏平控件'
          },
          {
            src: require('./../../assets/images/setting/echarts-three-dimensional.png'),
            srcSelected: require('./../../assets/images/setting/echarts-three-dimensional-selected.png'),
            name: '立体控件'
          }
        ]
      },
      backgroundTheme: [
        {
          src: require('./../../assets/images/setting/background-theme.png'),
          name: '默认主题'
        },
        {
          src: require('./../../assets/images/setting/background-theme1.png'),
          name: '星空主题'
        },
        {
          src: require('./../../assets/images/setting/background-theme2.png'),
          name: '地球主题'
        }
      ],
      settingButton: [
        '退出',
        '保存'
      ]
    }
  },
  directives: {
    drag: {
      // 指令的定义
      bind: function (el, binding, vnode) {
        let isChildDom
        if (binding.arg !== undefined) {
          isChildDom = true
        } else {
          isChildDom = false
        }
        let offsetX = 0
        let offsetY = 0
        function down (e) {
          offsetX = (e.pageX - el.offsetLeft)
          offsetY = (e.pageY - el.offsetTop)
          if (isChildDom) {
            let barStyle = el.firstChild.currentStyle
              ? el.firstChild.currentStyle
              : window.getComputedStyle(el.firstChild, null)
            let boxStyle = el.currentStyle
              ? el.currentStyle
              : window.getComputedStyle(el, null)
            let left = Number(barStyle.getPropertyValue('left').replace('px', '')) + Number(boxStyle.getPropertyValue('left').replace('px', '')) + Number(boxStyle.getPropertyValue('border-left-width').replace('px', ''))
            let right = left + Number(barStyle.getPropertyValue('width').replace('px', ''))
            let top = Number(barStyle.getPropertyValue('top').replace('px', '')) + Number(boxStyle.getPropertyValue('top').replace('px', '')) + Number(boxStyle.getPropertyValue('border-top-width').replace('px', ''))
            let bottom = top + Number(barStyle.getPropertyValue('height').replace('px', ''))
            if (e.clientX <= right && e.clientX >= left && e.clientY >= top && e.clientY <= bottom) {
              addEventListener('mousemove', move)
              addEventListener('mouseup', up)
            }
          } else {
            addEventListener('mousemove', move)
            addEventListener('mouseup', up)
          }
        }
        function move (e) {
          let isMove = false
          // 鼠标移入类名为'drag-background', 'drag-span', 'drag-border'的时候，才能拖拽,目前是判断 鼠标是否移出拖拽区
          let className = ['drag-background', 'drag-span', 'drag-border']
          let arr = e.target.className.split(' ')
          for (let i = 0; i < arr.length; i++) {
            className.forEach(item => {
              if (arr[i] === item) {
                isMove = true
              }
            })
          }
          if (isMove && binding.value.getIsOut()) {
            el.style.left = (e.pageX - offsetX) + 'px'
            el.style.top = (e.pageY - offsetY) + 'px'
          }
        }
        function up () {
          removeEventListener('mousemove', move)
          removeEventListener('mouseup', up)
        }
        el.addEventListener('mousedown', down)
      }
    }
  },
  computed: {
    // 拖拽模块样式
    dragItem (data) {
      let left
      let top
      let width
      let height
      let display = 'block'
      switch (data.moduleType) {
        case '1x1':
          width = '25%'
          height = '33.33%'
          break
        case '1x2':
          width = '25%'
          height = '66.66%'
          break
        case '2x1':
          width = '50%'
          height = '33.33%'
          break
        case '2x2':
          width = '50%'
          height = '66.66%'
          break
        case '3x2':
          width = '75%'
          height = '33.33%'
          break
      }
      if (data.moduleSeat.length > 0) {
        switch (data.moduleSeat[0]) {
          case 0:
            left = '0'
            top = '0'
            break
          case 1:
            left = '25%'
            top = '0'
            break
          case 2:
            left = '50%'
            top = '0'
            break
          case 3:
            left = '75%'
            top = '0'
            break
          case 4:
            left = '0'
            top = '33.33%'
            break
          case 5:
            left = '25%'
            top = '33.33%'
            break
          case 6:
            left = '50%'
            top = '33.33%'
            break
          case 7:
            left = '75%'
            top = '33.33%'
            break
          case 8:
            left = '0'
            top = '66.66%'
            break
          case 9:
            left = '25%'
            top = '66.66%'
            break
          case 10:
            left = '50%'
            top = '66.66%'
            break
          case 11:
            left = '75%'
            top = '66.66%'
            break
        }
      } else {
        display = 'none'
      }
      return {
        left: left,
        top: top,
        width: width,
        height: height,
        display: display
      }
    },
    dragItemStyle () {
      return moduleStyle(this.moduleList)
    },
    // 边框主题
    // moduleThemeIndex () {
    // return this.$store.state.themeConfig.moduleTheme === 'default' ? 1 : 0
    // },
    // echarts主题
    // echartsThemeIndex () {
    // return this.$store.state.themeConfig.echartsTheme === 'default' ? 1 : 0
    // },
    // 背景主题
    // backgroundThemeIndex () {
    // return this.$store.state.themeConfig.backgroundTheme
    // },
    isSetting () {
      return this.$store.state.themeConfig.isSetting
    }
  },
  methods: {
    showTips (message) {
      this.$parent.showTips(message)
    },
    getIsOut () {
      return this.isOut
    },
    // 结束设置
    endSetting (index) {
      if (index === 0) {
        this.$store.commit('CHANGETHEMECONFIG', { type: 'isSetting', newData: false })
      } else {
        // 保存页面配置
        let params = {
          layoutId: this.backgroundThemeIndex + 1,
          frameId: this.moduleThemeIndex === 0 ? 1 : 2,
          widgetId: this.echartsThemeIndex === 0 ? 1 : 2,
          modules: moduleListToModule({ moduleList: this.moduleList })
        }
        this.commonApi.savePageConfig(params).then(res => {
          if (res.data.code === '0') {
            this.$parent.getPageConfig()
            // this.$store.commit('CHANGEMODULELIST', this.moduleList)
            // this.$store.commit('CHANGETHEMECONFIG', {
            //  type: 'all',
            //  newData: {
            // isSetting: false,
            // backgroundTheme: this.backgroundThemeIndex,
            // moduleTheme: this.moduleThemeIndex === 0 ? 'flat' : 'default',
            // echartsTheme: this.echartsThemeIndex === 0 ? 'flat' : 'default'
            // }
            // })
          } else {
            this.showTips('请求失败，点击确认继续刷新')
          }
        }, res => {
          this.showTips('请求失败，点击确认继续刷新')
        })
      }
    },
    // 切换设置内容
    changeSetting (index) {
      this.settingIndex = index
    },
    // 选择模块主题或者控件主题,背景主题
    changeTheme (type, index) {
      switch (type) {
        case 'moduleTheme': this.moduleThemeIndex = index
          break
        case 'echartsTheme': this.echartsThemeIndex = index
          break
        case 'backgroundTheme': this.backgroundThemeIndex = index
          break
      }
      // this.$store.commit('CHANGETHEMECONFIG', { type: type, newData: index })
    },
    // 选择模块
    selectModule (index) {
      // 退选的时候
      if (this.moduleList[index].moduleSeat.length > 0) {
        this.moduleList[index].moduleSeat = []
        return false
      }
      let seat = this.judgePutDownModule({ index: index, moduleList: this.moduleList })
      if (seat.length > 0) {
        this.moduleList[index].moduleSeat = seat[0]
      } else {
        this.showTips('剩下空间不足')
      }
    },
    // 判断能否放下params.moduleList的模块
    // params.index当前模块索引
    judgePutDownModule (params) {
      // 获取现在模块所有选中模块的占位params.moduleList选择退选的时候是this.moduleList
      let moduleSeat = getModuleSeat(params.moduleList)
      // 判断是否还有空间
      if (moduleSeat.length >= 12) {
        console.log('空间已满')
        return false
      }
      // 获取所选模块的宽度比
      let moduleMessage = getOnceSize(params.moduleList[params.index])
      // 判断剩余空间是否放得下所选模块
      if (12 - moduleSeat.length < moduleMessage) {
        return false
      }
      // 判断剩余空间的宽度能否放得下所选模块
      let surplusSeat = []
      for (let i = 0; i < 12; i++) {
        if (!moduleSeat.includes(i)) {
          surplusSeat.push(i)
        }
      }
      // 当空的位置是4n -1 的时候, 不能选择2x, 3x的模块
      let onceModuleSeat = []
      let allCanDownModuleSeat = []
      for (let i = 0; i < surplusSeat.length; i++) {
        onceModuleSeat = getOnceSeat({ currentSeat: surplusSeat[i], module: moduleMessage, moduleSeat: moduleSeat })
        if (onceModuleSeat.length > 0) {
          allCanDownModuleSeat.push(onceModuleSeat)
        }
      }
      if (allCanDownModuleSeat.length <= 0) {
        console.log('空间不足')
      }
      return allCanDownModuleSeat
    },
    // 模块拖拽鼠标按下
    dragDownFn (event, index) {
      this.isOut = true
      this.moveIndex = index
    },
    // 模块拖拽鼠标离开
    dragsOutFn (event, index) {
      if (this.isOut) {
        this.dragsFn(event, index)
      } else {
        this.isOut = false
      }
    },
    // 模块拖拽鼠标放开
    dragsFn (event, index) {
      console.log(event)
      if (!this.isOut) {
        return false
      }
      this.isOut = false
      this.moveIndex = ''
      let dragContentWid = this.$refs.dragContent.offsetWidth
      let dragContentHeight = this.$refs.dragContent.offsetHeight
      let moduleOriginalSeat = this.moduleList[index].moduleSeat
      // 根据event.target.parentElement.offsetTop,event.target.parentElement.offsetLeft与dragContentHeight,dragContentWid
      // 对比判断拖拽的位置,获取拖拽组件的初始位置，推算拖拽组件的所有位置
      let left
      let top
      // 修正系数，因为边框是的margin: 10px;这个属性在视觉上产生影响，所有在获取父元素的offset需要增加margin的量
      let correctionMargin = 10
      let eventObj = event.target.className.indexOf('drag-border') > -1 ? event.target : event.target.parentElement
      if (eventObj.offsetLeft + correctionMargin <= dragContentWid / 4) {
        left = 0
      } else if (eventObj.offsetLeft + correctionMargin <= dragContentWid / 2) {
        left = 1
      } else if (eventObj.offsetLeft + correctionMargin <= dragContentWid / 4 * 3) {
        left = 2
      } else {
        left = 3
      }
      if (eventObj.offsetTop + correctionMargin <= dragContentHeight / 3) {
        top = 0
      } else if (eventObj.offsetTop + correctionMargin <= dragContentHeight / 3 * 2) {
        top = 1
      } else {
        top = 2
      }
      // 当拖拽是2x2， 2x1的时候，left最大为2，当拖拽3x2的时候，left最大值是1，
      let moduleMessage = getOnceSize(this.moduleList[index])
      if (moduleMessage.moduleWidthX === 3 && left > 1) {
        left = 1
      } else if (moduleMessage.moduleWidthX === 2 && left > 2) {
        left = 2
      }
      if (moduleMessage.moduleHeightY === 2 && top > 1) {
        top = 1
      }
      let startSeat = left + top * 4
      // 获取拖拽组件的新位置
      let onceModuleSeat = getOnceSeat({ currentSeat: startSeat, module: getOnceSize(this.moduleList[index]) })
      // 获取拖拽模块新位置上原来的组件的所有位置，
      let originalAllSeat = getOriginalAllSeat({ currentModuleSeat: onceModuleSeat, moduleList: this.moduleList, currentIndex: index })
      // 由于:style改变的style在新旧一样的时候，不会覆盖v-drag产生的top、left值，所以在这里需要给一个中间值，防止:style不刷新
      this.dragItemStyle[index].style.top = '1px'
      this.dragItemStyle[index].style.left = '1px'
      // 当获取拖拽模块新位置上原来的组件的所有位置的值数量大于获取拖拽组件的新位置的值，那么拖拽模块新位置上原来的组件存在跨区，此时不能拖拽
      if (originalAllSeat.allSeat.length > onceModuleSeat.length) {
        this.moduleList[index].moduleSeat = [...moduleOriginalSeat]
      } else {
        this.moduleList[index].moduleSeat = [...onceModuleSeat]
        // 拖拽模块位置赋值,有交集
        if (originalAllSeat.isIntersection) {
          // 拖拽模块新位置的原组件位置赋值（优先排放大模块即 3x2 > 2x2 > (2x1 | 1x2这时候需要每一个情况排序，尝试能否都能填满) > 1x1）
          // 先清空
          originalAllSeat.indexArr.forEach(item => {
            this.moduleList[item].moduleSeat = []
          })
          // 在 4X3的框内，不存在3x2, 2x2作为被清空模块,即3x2, 2x2只能被作为拖拽模块
          // 赋值，优先赋值面积大的，面积相同，即同时存在2x1， 1x2移动的时候，先进行尝试那些空位能放下这些元素
          if (originalAllSeat.sortMessage.equallyIndex.length > 0) {
            // 清空模块能用的位置集合，一个模块一个数组排序[[[0,4]], [[0, 1], [1, 2]]]
            let equallyIndexModuleSeat = []
            originalAllSeat.sortMessage.equallyIndex.forEach((item, judgeIndex) => {
              equallyIndexModuleSeat.push([judgeIndex, this.judgePutDownModule({ index: item, moduleList: this.moduleList })])
            })
            // 根据集合，优先排序集合少的，
            equallyIndexModuleSeat.sort(function (a, b) {
              if (a[1].length < b[1].length) {
                return -1
              }
              if (a[1].length > b[1].length) {
                return 1
              }
              return 0
            })
            // 赋值
            equallyIndexModuleSeat.forEach(item => {
              let seat = this.judgePutDownModule({ index: originalAllSeat.sortMessage.equallyIndex[item[0]], moduleList: this.moduleList })
              if (seat.length > 0) {
                this.moduleList[originalAllSeat.sortMessage.equallyIndex[item[0]]].moduleSeat = seat[0]
              } else {
                console.log('剩余空间不足', originalAllSeat.sortMessage.equallyIndex[item[0]])
              }
            })
          } else {
            // 不存在2x1, 1x2同时移动
            originalAllSeat.sortMessage.moduleIndexSort.forEach(item => {
              // 再赋值
              let seat = this.judgePutDownModule({ index: item, moduleList: this.moduleList })
              if (seat.length > 0) {
                this.moduleList[item].moduleSeat = seat[0]
              } else {
                console.log('剩余空间不足', item)
              }
            })
          }
        } else {
          // 整体平移，平移量为onceModuleSeat[0] - moduleOriginalSeat[0]
          let translation = moduleOriginalSeat[0] - onceModuleSeat[0]
          let moduleSeat
          originalAllSeat.indexArr.forEach((moduleIndex) => {
            moduleSeat = []
            this.moduleList[moduleIndex].moduleSeat.forEach((seat) => {
              moduleSeat.push(seat + translation)
            })
            this.moduleList[moduleIndex].moduleSeat = [...moduleSeat]
          })
        }
      }
    }
  },
  mounted () {
  },
  watch: {
    '$store.state.moduleList' (val) {
      this.moduleList = _.cloneDeep(val)
    },
    // '$store.state.themeConfig' (val) {
    // let config = _.cloneDeep(val)
    // this.moduleThemeIndex = config.moduleTheme === 'default' ? 1 : 0
    // this.echartsThemeIndex = config.echartsTheme === 'default' ? 1 : 0
    // this.backgroundThemeIndex = config.backgroundTheme
    // },
    isSetting (val) {
      this.moduleList = _.cloneDeep(this.$store.state.moduleList)
      let config = _.cloneDeep(this.$store.state.themeConfig)
      this.moduleThemeIndex = config.moduleTheme === 'default' ? 1 : 0
      this.echartsThemeIndex = config.echartsTheme === 'default' ? 1 : 0
      this.backgroundThemeIndex = config.backgroundTheme
    }
  }
}
</script>

<style lang="scss" scoped>
  .setting{
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    user-select: none;
    .select-content{
      width: 62.4%;
      position: relative;
      margin: 0 auto;
      overflow: hidden;
      font-size: 0;
      .setting-seat-img{
        width: 100%;
      }
      .select-title{
        width: 26%;
        position: absolute;
        top: 0;
        left: 37%;
        .select-title-img{
          width: 100%;
        }
        .select-title-item-list{
          display: inline-block;
          width: 100%;
          height: 30px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50% , -50%);
          text-align: center;
          span{
            display: inline-block;
            width: calc((100% - 19.28%) / 3);
            height: 100%;
            line-height: 30px;
            font-size: 12px;
            color: #A1CFFF;
            cursor: pointer;
            .active{
              color: #fff;
            }
          }
        }
      }
      .select-content-part{
        position: absolute;
        top: 12.5%;
        left: 5.6%;
        width: 88.8%;
        height: 67%;
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar{
          background-color: transparent;
          width: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #4f85fd;
          border-radius: 8px;
        }
        &::-webkit-scrollbar-button {
          background-color: transparent;
          height:5px;
        }
        &::-webkit-scrollbar-corner {
          background-color: #fff;
        }
        &::-webkit-scrollbar-arrow-color {
          background-color: #fff;
        }
        .select-module{
          width: 100%;
          ul {
            width: 100%;
            text-align: left;
          }
          li{
            display: none;
            width: calc(100% / 8);
            margin: 0 0 18px;
            text-align: center;
            overflow: hidden;
            cursor: pointer;
            .module-item-img{
              display: inline-block;
              width: 76px;
              height: 75px;
              position: relative;
              img{
                width: 100%;
              }
              span{
                display: inline-block;
                font-size: 12px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #99DFFF;
              }
            }
            p{
              display: inline-block;
              width: 100%;
              line-height: 20px;
              font-size: 12px;
              overflow: hidden;
              text-align: center;
              color: #99DFFF;
            }
            &.show {
              display: inline-block;
            }
            &.active{
              .module-item-img{
                width: 85px;
                span{
                  color: #fff;
                }
              }
              p{
                color: #fff;
              }
            }
          }
        }
        .select-theme{
          width: 100%;
          height: 100%;
          .border-theme, .echarts-theme{
            width: calc((100% - 2px) / 2);
            height: 100%;
            float: left;
          }
          .theme-item{
            width: calc(100% / 2);
            height: 100%;
            cursor: pointer;
            color: #95b7e6;
            font-size: 12px;
            float: left;
            text-align: center;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            .border-img{
              width: 144px;
              height: 140px;
            }
            img{
              width: 136px;
            }
            span{
              display: block;
              width: 100%;
              padding-top: 15px;
            }
            &.active{
              color: #fff;
              img{
                width: 144px;
              }
            }
          }
          .theme-part-border{
            width: 1px;
            height: 100%;
            float: left;
            border-left: 1px solid rgba(28,96,240,1);
            opacity:0.8;
          }
        }
        .select-background{
          width: 100%;
          height: 100%;
          .theme-item{
            width: calc(100% / 4);
            float: left;
            height: 100%;
            font-size: 12px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            color: #95b7e6;
            span{
              display: block;
              width: 100%;
              padding-top: 15px;
              cursor: pointer;
            }
            .border-img {
              width: 144px;
              height: 139px;
              display: flex;
              text-align: center;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              img{
                width: 83.4%;
              }
            }
            &.active{
              color: #fff;
              .border-img{
                background: url("./../../assets/images/setting/background-theme-selected.png") no-repeat center;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
      .setting-button{
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 19.2%;
        height: 10.34%;
        display: flex;
        justify-content: center;
        align-items: center;
        .setting-button-item{
          width: 76px;
          height: 29px;
          position: relative;
          float: left;
          margin: 0 10px;
          font-size: 14px;
          color: #95b7e6;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          img{
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          span{
            width: 100%;
            display: inline-block;
            text-align: center;
          }
        }
      }
    }
    .drag-module{
      width: 67.91%;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      .drag-seat-img{
        width: 100%;
      }
      .drag-content {
        position: absolute;
        top: 50%;
        left: 6.1%;
        transform: translate(0, -50%);
        width: 87.8%;
        height: 82.75%;
        overflow: hidden;
        .drag-border{
          position: absolute;
          color: #fff;
          font-size: 14px;
          cursor: move;
          img{
            margin: 10px;
            width: calc(100% - 20px);
            height: calc(100% - 20px);
          }
          .drag-background{
            margin: 10px;
            width: calc(100% - 20px);
            height: calc(100% - 20px);
          }
          span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          &.moving{
            z-index: 10;
          }
          &.hide-module{
            display: none;
          }
          &.module-type1x1{
            width: 25%;
            height: 33.33%;
            .drag-background{
              background: url("./../../assets/images/setting/module-item1x1.png") no-repeat center;
              background-size: 100% 100%;
            }
          }
          &.module-type1x2{
            width: 25%;
            height: 66.66%;
            .drag-background{
              background: url("./../../assets/images/setting/module-item1x2.png") no-repeat center;
              background-size: 100% 100%;
            }
          }
          &.module-type2x1{
            width: 50%;
            height: 33.33%;
            .drag-background{
              background: url("./../../assets/images/setting/module-item2x1.png") no-repeat center;
              background-size: 100% 100%;
            }
          }
          &.module-type2x2{
            width: 50%;
            height: 66.66%;
            .drag-background{
              background: url("./../../assets/images/setting/module-item2x2.png") no-repeat center;
              background-size: 100% 100%;
            }
          }
          &.module-type3x2{
            width: 75%;
            height: 66.66%;
            .drag-background{
              background: url("./../../assets/images/setting/module-item3x2.png") no-repeat center;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 1890px) {
    .setting {
      .select-title{
        .select-title-item-list{
          span{
            font-size: 14px;
          }
        }
      }
      .select-content-part {
        .select-module {
          li {
            .module-item-img {
              width: 91px;
              height: 89px;
              img {
                transform: translateY(5px);
              }
              span {
                font-size: 14px;
              }
            }
            p {
              font-size: 14px;
            }
            &.active {
              .module-item-img {
                width: 102px;
                img {
                  transform: translateY(0);
                }
              }
            }
          }
        }
        .select-theme{
          .theme-item{
            font-size: 14px;
            img{
              width: 163px;
            }
            &.active{
              img{
                width: 173px;
              }
            }
          }
        }
        .select-background{
          .theme-item{
            .border-img{
              width: 173px;
              height: 167px;
              &.active{
                .border-img{
                  background: url("./../../assets/images/setting/background-theme-selected.png") no-repeat center;
                  background-size: 100% 100%;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
